<template>
  <!-- 搜索用户，返回用户id -->
  <el-select
    v-model="selectObjects" :disabled="disabled" :loading="loading" :placeholder="placeholder" :remote-method="page"
    filterable multiple remote reserve-keyword value-key="id"
    default-first-option
  >
    <el-option
      v-for="item in options" :key="item.id"
      :label="(item.depart?item.depart+',':'')+(item.center?item.center+',':'')+item.cn+','+item.sn"
      :value="item"
    />
  </el-select>
</template>
<script>
import {page} from "@/api/system/user";

export default {
  name: "UserMultipleSelect",

  props: {
    value: {type: Array, default: null},
    placeholder: {type: String, default: ''},
    disabled: {type: Boolean, default: false},
  },

  data() {
    return {
      selectObjects: [],
      loading: false,
      options: [],
    }
  },
  watch: {
    'value': {
      handler(val) {
        this.selectObjects = val
        this.options = val
      }, immediate: true
    },

    'selectObjects': {
      handler() {
        this.$emit('input', this.selectObjects)
      }, immediate: false
    }
  },

  methods: {
    page(query) {
      const form = {
        selectSearch:query
      }
      page(form, 0, 20).then(res => {
        this.options = res.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
